<style scoped>
	#input{
    	border: 0;
        background-image: url(../resource/images/activities/search.activities.png);
        background-repeat: no-repeat;
        background-size: 35%;
        background-position: 50%;
        padding-top: .3em;
        padding-left: 3em;
        padding-bottom: .3em;
        position: relative;
        width: 100%;
        border-radius: 10em;
        z-index: 2;
        background-color:rgba(255,255,255,.6);
	}
	#input:focus{
		border:0;
		background:rgba(255,255,255,.6);
	}
</style>
<template>
	<input v-model="txt" @change="bgstatus" id="input" type="text" name="keyWord" :style="bg">
</template>
<script>
    module.exports = {
        data:function(){
            return {
                bg:"",
                txt:""
            }
        },
        methods:{
            bgstatus:function(){
                if(this.txt!=""){
                    this.bg = "background:rgba(255,255,255,.6);";
                }else{
                    this.bg="background-image: url(../resource/images/activities/search.activities.png);";
                }
            }
        }
    }
</script>